<template>
	<view class="">
		<view class="page">

			<view class="head-bg">
				<!-- 预留导航条 -->
				<view class="status-bar"></view>		
				<view class="member-info" :style="{'margin-top' : statusbarH +'px'} " @click="goLogin">
					<u-avatar :src="memberInfo.vxUrl" size="50"></u-avatar>

					<view v-if="isLogin" class="member-nick">
						<text>{{memberInfo.contactPhone}}</text>
						<view class="censorStatus" @click.stop="goAuthenication">{{censorStatus == 2 ? '已认证' : '去认证'}}
						</view>
					</view>

					<view v-else class="loginTip">
						请登录
					</view>
				</view>		
			</view>

			<view class="my-order card">
				<view class="order">
					<view class="order-item" @click="goBusiness(1)">
						<image src="../../static/user/mine_order.png"></image>
						<text>我的订单</text>
					</view>

					<view class="order-item" @click="goBusiness(2)">
						<image src="../../static/user/mine_coupon.png"></image>
						<text>我的优惠券</text>
					</view>

					<!-- <view class="order-item" @click="goBusiness(3)">
						<image src="../../static/user/mine_distribution.png"></image>
						<text>分销中心</text>
					</view> -->

					<view class="order-item" @click="goBusiness(4)">
						<image src="../../static/user/mine_invoice.png"></image>
						<text>开票管理</text>
					</view>



				</view>

			</view>

			<view class="card" style="margin: 20upx 36upx 0;padding: 0 39upx;" v-if="tenantId != '29'">
				<mine-item name="商务合作" imgSrc="../../static/user/mine_business.png" @itemClick="itemClick(1)">
				</mine-item>
				<mine-item name="联系客服" imgSrc="../../static/user/mine_message.png" @itemClick="itemClick(2)">
				</mine-item>
				<mine-item name="关于我们" imgSrc="../../static/user/mine_aboutUs.png" @itemClick="itemClick(4)">
				</mine-item>
			</view>



			<text class="logout" v-if="isLogin" @tap="showLogout = true">退出登录</text>

			<view v-if="isShowCompany" style="margin: 30upx 0;text-align: center;">
				<text style="font-size: 24upx;color: #a7a7a7;">技术支持：深圳市行知网络科技有限公司</text>
			</view>

			<u-modal title="提示" content="" :show="showLogout" showCancelButton @confirm="confirm"
				@cancel="showLogout = false">

				<view style="text-align: center;font-size: 32upx;color: #A7A7A7;">确定退出登录吗？</view>
			</u-modal>

		</view>

		<u-popup :show="showService" @close="showService = false" round="16" mode="center">
			<view class="serviceWrapper">
				<view class="serviceItem">
					<view class="title">
						<text>微信在线客服</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="subTitle">
						您可以用图文形式，向客服咨询遇到的问题
					</view>
					<button class="contactBtn" open-type="contact" @click="showService=false"></button>
				</view>

				<view class="serviceItem" @click="goCallPhone">
					<view class="title">
						<text>拨打客服电话</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="subTitle">
						拨打租车客服电话，咨询您遇到的问题
					</view>
				</view>

			</view>

		</u-popup>	

		<HomeTabbar :tab="2"></HomeTabbar>
	</view>
</template>

<script>
	import HomeTabbar from '@/components/tabbar/tabbar';
	import mineItem from '@/components/mine/mine-item.vue';
	import {
		memberInfo,
		updatecustomerUrl
	} from '@/api/mine-api.js';
	import settings from '@/settings.js'
	export default {
		components: {
			mineItem,
			HomeTabbar
		},

		data() {
			return {
				showLogout: false,
				showService: false,
				statusbarH: 88,
				memberInfo: {},
				memberAcountData: {}
			}
		},

		computed: {
			isLogin() {
				return this.$store.state.user.isLogin;
			},
			censorStatus() {
				return this.$store.state.user.censorStatus;
			},
			servicesPhone() {
				return this.$store.state.initData.initData.consumerHotline;
			},
			tenantId() {
				return this.$store.state.user.tenantId;
			},
			isShowCompany() {
				return settings.isShowCompany
			}
			
		},
		onLoad(op) {

			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage']
			})

			if (op && op.scene) {
				let scene = op && op.scene.split('_');
				let memberNo = scene[0]; // memberNo
				console.log(memberNo)
				if (memberNo) {
					// 存入分享上级
					this.$store.commit('user/saveinviterId', memberNo);
				}
			}

			uni.getSystemInfo({
				success: (e) => {
					this.statusbarH = e.statusBarHeight + 44;
					console.log(e);
				}
			})

			uni.$on('loginRefresh', () => {
				this.getMemberInfo();
			})
			this.getMemberInfo();
		},
		methods: {
			getMemberInfo() {
				if (this.isLogin) {
					memberInfo().then(res => {
						this.memberInfo = res.data;
					})
				} else {
					this.memberAcountData = {};
					this.memberInfo = {};
				}
			},

			
			goLogin() {
				if (!this.isLogin) { //没有登录去登录
					uni.navigateTo({
						url: '../login/login'
					})
				} else { //登录后点击授权头像
					uni.getUserProfile({
						desc: '获取你的昵称、头像、地区及性别',
						success: (userRes) => {
							console.log('用户信息---', userRes.userInfo);
							let userInfo = userRes.userInfo;
							this.getVXInfo(userInfo);
						}
					})
				}
			},
			//获取微信头像用户信息
			getVXInfo(userInfo) {
				updatecustomerUrl({
					vxUrl: userInfo.avatarUrl,
					vxName: userInfo.nickName,
					openId: this.$store.state.user.openid,
					tenantId: this.$store.state.user.tenantId,
					memberNo: this.memberInfo.memberNo
				}).then(res => {
					if (res.code == 200) {
						this.getMemberInfo();
					}
				})

			},
			//身份认证
			goAuthenication() {
				if (this.censorStatus == 1) {
					uni.navigateTo({
						url: '../login/real_name'
					})
				}
			},

			//顶部业务跳转
			goBusiness(type) {
				if (this.isLogin) {
					switch (type) {
						case 1: //订单
							uni.navigateTo({
								url: '/pagesD/order/shortOrder/shortOrder-list?type=1'
							})
							break
						case 2: //优惠券
							uni.navigateTo({
								url: '/pages/coupon/mine-coupon'
							})
							break
						case 3: //分销中心
						    uni.navigateTo({
						    	url:'/pagesD/withdraw/distribution-center'
						    })
							break
						case 4: //发票
							uni.navigateTo({
								url: '/pagesC/invoice/invoice-manager'
							})
							break
							
					}

				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},

			itemClick(type) {
				switch (type) {
					case 1: //商务合作
						uni.navigateTo({
							url: '../guide/guide?type=4'
						})
						break
					case 2: //客服
						// this.$u.toast("敬请期待");
						this.showService = true;
						break
					case 3: //成为车主
						this.$u.toast("敬请期待");
						break
					case 4: //关于我们
						uni.navigateTo({
							url: './aboutUs'
						})
						break
				}
			},

			goCallPhone() {
				this.showService = false;
				uni.makePhoneCall({
					phoneNumber: this.servicesPhone,
					success: (res) => {
						console.log('拨打电话成功');
					}
				})
			},		
			confirm() {
				this.showLogout = false;
				uni.clearStorage();
				this.$store.commit('user/saveIsLogin', false);
				this.$store.commit('user/saveOpenId', '');
				this.$store.commit('user/saveUserInfo', {});
				uni.$emit('loginRefresh');
				this.getMemberInfo();
			}
		}
	}
</script>

<style lang="scss">
	.page {
		position: relative;
		@include flex(column);
	}

	.head-bg {
		background: linear-gradient(0deg, #F0F0F0 0%, #B2E2FF 100%);
		text-align: center;

		.status-bar {
			height: var(--status-bar-height);
			width: 100%;
		}

		.title {
			display: inline-block;
			color: white;
			font-size: 36upx;
			margin-top: 16upx;
			letter-spacing: 3upx;
		}

		.member-info {
			background-color: #fff;
			margin: 90rpx 36rpx 0;
			border-radius: 16rpx;
			padding: 20rpx 40rpx;
			display: flex;
			align-items: center;

			.member-nick {
				margin-left: 22rpx;
				display: flex;
				flex-direction: column;
				font-size: 32rpx;
				font-weight: bold;
				color: #131313;

				.censorStatus {
					height: 50rpx;
					width: 110rpx;
					line-height: 50rpx;
					text-align: center;
					background: #3699FF;
					border-radius: 25rpx;
					color: #fff;
					font-size: 24rpx;
				}

			}

			.loginTip {
				color: $text-color-33;
				font-size: 30upx;
				text-align: center;
				margin-left: 10upx;
				margin-top: 30upx;


			}

		}
	}

	.my-order {
		margin: 20upx 36upx;

		text {
			display: inline-block;
			font-size: 32upx;
			margin: 28upx 0 0 40upx;
		}

		.order {
			@include flex;
			margin-top: 30upx;

			justify-content: space-around;

			.order-item {
				@include flex(column);
				justify-content: center;
				align-items: center;

				image {
					width: 72upx;
					height: 72upx;
				}

				text {
					font-size: 24upx;
					margin: 10upx 0 30upx;
				}
			}
		}
	}

	.test {
		margin: 0upx 36upx 0;

		.invite {
			width: 100%;
			height: 200upx;
			box-shadow: 2upx $text-color-33;
		}
	}

	.profit {
		height: 235upx;
		margin: 10upx 36upx 0;
		@include flex;
		align-items: center;

		.profit-item {
			@include flex(column);
			justify-content: center;

			.rect-text {
				width: 171upx;
				height: 56upx;
				text-align: center;
				line-height: 56upx;
				font-size: 26upx;
				color: $text-color-33;
				margin-top: 10upx;
				border-radius: 90upx;
				border: solid 2upx $text-color-66;
				position: relative;
				left: -10upx;
				// box-sizing: border-box;
			}

			.circle-text {
				width: 173upx;
				height: 58upx;
				text-align: center;
				line-height: 58upx;
				font-size: 26upx;
				color: $text-color-ff;
				margin-top: 10upx;
				background-color: $main-color;
				border-radius: 90upx;
				position: relative;
				left: -10upx;
			}
		}
	}

	.logout {
		height: 98upx;
		display: block;
		text-align: center;
		line-height: 100upx;
		font-size: 32upx;
		color: $main-color;
		border-radius: 13upx;
		background-color: $bg-white-color;
		border: solid 2upx $main-color;
		margin: 40upx 36upx 60upx;
		font-weight: 600;

	}

	.card {
		background-color: $bg-white-color;
		border-radius: 15upx;
		box-shadow: 2upx $text-color-99;
	}

	.authentication {
		background-color: $main-color;
		color: $text-color-ff;
		font-size: 24upx;
		font-weight: bold;
		height: 78upx;
		line-height: 78upx;
		text-align: center;
		border-radius: 16upx;
		margin: 10upx 36upx 0;

	}


	.serviceWrapper {
		padding: 30upx;

		.serviceItem {
			margin: 15upx 0;
			padding: 36upx;
			border-radius: 16upx;
			background-color: #F7F7F7;
			position: relative;

			.title {
				display: flex;
				justify-content: space-between;
				color: $text-color-33;
				font-size: 26upx;
				font-weight: bold;
			}

			.subTitle {
				margin-top: 30upx;
				color: $text-color-99;
				font-size: 20upx;
			}

			.contactBtn {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background-color: #F7F7F700;

				&::after {
					border: none;
				}


			}
		}
	}
</style>
